<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Science Website</title>
    <style>
        td {
            text-align: center;
            vertical-align: middle;
        }

        .t-left .dummy {
            display: none;
        }

        a.anchor {
            display: block;
            position: relative;
            top: -80px;
            visibility: hidden;
        }
    </style>
</head>

<body style="padding-top: 70px;">
    <nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">
        <a href="#" class="navbar-brand">Science Website</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav">
                <li class="navbar-item">
                    <a href="#multiplication" class="nav-link">Multiplication table</a>
                </li>
                <li class="navbar-item">
                    <a href="#scientists" class="nav-link">Scientists</a>
                </li>
                <li class="navbar-item">
                    <a class="nav-link" href="" data-toggle="modal" data-target="#contact-popup">Contact us</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="modal fade" id="contact-popup">
        <div class="modal-dialog modal-lg">
            <form>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Contact</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container" style="margin-top:20px;">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" for="name">Name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="name" placeholder="Required">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" for="email">Email Address</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="email" placeholder="Optional">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" for="content">Content</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" id="content"
                                        placeholder="What do you think about us?" rows="6"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Ok</button>
                        <button class="btn" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container" style="margin-top: 30px;">
        <div class="row">
            <h4>Multiplication table</h4>
        </div>

        <a class="anchor" id="multiplication"></a>
        <div class="card bg-light text-left">
            <div class="card-body">
                <table class="table table-sm table-bordered">
                    <tbody id="mul-table" class='t-left'>

                    </tbody>
                </table>
                <button class="btn btn-primary" onclick="change_syle()">Change style</button>
            </div>
        </div>

        <a class="anchor" id="scientists"></a>
        <div class="row" style="margin-top: 30px;">
            <h4>Scientists</h4>
        </div>

        <div class="card-deck">
            <div class="card bg-light mb-4">
                <img class="card-img-top img-fluid" src="/images/ads.jpg" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">Thomas Alva Edison</h4>
                    <p class="card-text"> was an American
                        inventor and businessman who has been described as America's greatest inventor. He
                        developed many devices in fields such as electric power generation, mass communication, sound
                        recording, and motion pictures. These inventions, which include the phonograph, the motion
                        picture camera, and early versions of the electric light bulb, have had a widespread impact on
                        the modern industrialized world. He was one of the first inventors to apply the principles of
                        organized science and teamwork to the process of invention, working with many researchers and
                        employees. He established the first industrial research laboratory.</p>
                </div>
            </div>

            <div class="w-100 d-none d-sm-block d-md-none"></div>

            <div class="card bg-light mb-4">
                <img class="card-img-top img-fluid" src="/images/lbnc.jpg" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">Gottfried Wilhelm Leibniz</h4>
                    <p class="card-text"> was a German philosopher, mathematician, scientist, diplomat and polymath. He
                        is a prominent figure in both the history of philosophy and the history of mathematics. As a
                        philosopher, he was one of the greatest representatives of 17th century rationalism. As a
                        mathematician, his greatest achievement was the development of the main ideas of differential
                        and integral calculus, independently of Isaac Newton's contemporaneous developments. He was also
                        a pioneer in the field of mechanical calculators.
                        While working on adding automatic multiplication and division to Pascal's calculator, he was the
                        first to describe a pinwheel calculator in 1685 and invented the Leibniz wheel, used in the
                        arithmometer, the first mass-produced mechanical calculator. He also refined the binary number
                        system, which is the foundation of nearly all digital
                        computers, including the Von Neumann architecture, which is the standard design paradigm,
                        or"computer architecture", followed from the second half of the 20th century, and into the 21st.
                    </p>
                </div>
            </div>

            <div class="w-100 d-none d-md-block d-sm-none"></div>

            <div class="w-100 d-none d-sm-block d-md-none"></div>

            <div class="card bg-light mb-4">
                <img class="card-img-top img-fluid" src="/images/newton.PNG" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">Sir Isaac Newton</h4>
                    <p class="card-text"> was an English
                        mathematician, physicist, astronomer, theologian, and author (described in his time as a
                        "natural philosopher") who is widely recognised as one of the greatest mathematicians and most
                        influential scientists of all time and as a key figure in the scientific revolution. His book
                        Philosophiæ Naturalis Principia Mathematica (Mathematical Principles of Natural Philosophy),
                        first published in 1687, established classical mechanics. Newton also made seminal contributions
                        to optics, and shares credit with Gottfried Wilhelm Leibniz for developing the infinitesimal
                        calculus.</p>
                </div>
            </div>
            <div class="w-100 d-none d-sm-block d-md-none"></div>
            <div class="card bg-light mb-4">
                <img class="card-img-top img-fluid" src="/images/tsl.jpg" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">Nikola Tesla </h4>
                    <p class="card-text">was a Serbian-American inventor,
                        electrical engineer, mechanical engineer, and futurist best known for his contributions to the
                        design of the modern alternating current (AC) electricity supply system.</p>
                </div>
            </div>
            <div class="w-100 d-none d-md-block">
            </div>
        </div>

        <a class="anchor" id="contact"></a>
        <footer class="pt-4 my-md-5 pt-md-5 border-top">
            <div class="row">
                <div class="col-12 col-md">
                    <!-- <img class="mb-2" src="" alt="" width="24" height="24"> -->
                    <small class="d-block mb-3 text-muted">© 2021</small>
                </div>
                <div class="col-6 col-md">
                    <h5>Features</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#scientists">Scientists</a></li>
                        <li><a class="text-muted" href="#multiplication">Multiplication table</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5>Contact</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="mailto:rekaerst@outlook.com">Email</a></li>
                        <li><a class="text-muted" href="#">Phone Number: 4242424242</a></li>
                        <li><a class="text-muted" href="#">Linkedin</a></li>
                        <li><a class="text-muted" href="https://github.com/rekaerst">Github</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5>About</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">Team</a></li>
                        <li><a class="text-muted" href="#">Locations</a></li>
                        <li><a class="text-muted" href="#">Privacy</a></li>
                        <li><a class="text-muted" href="#">Terms</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script>
        // draw a multiplication table
        function draw_table() {
            var table = document.getElementById('mul-table');
            var row_count = 9;
            var row = null;
            for (var i = 1; i <= row_count; i++) {
                new_row();
                new_dummy_col(row_count - i);
                for (var j = 1; j <= i; j++) {
                    new_col(i, j);
                }
                new_dummy_col(row_count - i);
            }


            // create a new row to which current row was assigned
            function new_row() {
                table.insertAdjacentHTML('beforeend', '<tr></tr>');
                row = table.lastChild;
            }

            // create a new dummy column with colspan equal to arg:span
            function new_dummy_col(span) {
                if (span != 0) {
                    row.insertAdjacentHTML('beforeend', '<td class="dummy" colspan="{0}"></td>'.format(span));
                }
            }

            // create a new column whose content is multiplication of n and m, on current row
            // n, m: number
            function new_col(n, m) {
                row.insertAdjacentHTML('beforeend', '<td colspan="2">{0} &times; {1} = {2}</td>'.format(n, m, n * m));
            }
        }

        if (!String.prototype.format) {
            String.prototype.format = function () {
                var args = arguments;
                return this.replace(/{(\d+)}/g, function (match, number) {
                    return typeof args[number] != 'undefined'
                        ? args[number]
                        : match
                        ;
                });
            };
        }

        // toggle between align left and pyramid style for table
        function change_syle() {
            var el = document.getElementById('mul-table');
            if (el.className === 't-left') {
                el.classList = 't-pyramid'
            } else {
                el.className = 't-left'
            }
        }

        draw_table();

    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

</body>

</html>